﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>路由 单页应用</title>
	<script type="text/javascript" src="bower_components/vue/dist/vue.js"></script>	
	<script type="text/javascript" src="bower_components/vue-router/dist/vue-router.js"></script>	
</head>
<body>
	<div id="box">
		<ul>
			<li><a v-link="{path:'/home'}">首页</a></li>
			<li><a v-link="{path:'/news'}">新闻页</a></li>
		</ul>
		<div>
			<router-view></router-view>
		</div>
	</div>
	
<script type="text/javascript">
	// 建立一个根组件 必须的 
	var app = Vue.extend();
	// 准备home news组件 
	var Home = Vue.extend({
		template:"欢迎来到首页"
	});
	var News = Vue.extend({
		template:"欢迎来到新闻页"
	});
	// 路由 
	var router =new VueRouter();
	// 关联 
	router.map({
		'home':{
			component:Home
		},
		'news':{
			component:News
		}
	});
	// 启动 
	router.start(app,"#box");
	// 开始的跳转 
	router.redirect({
		"/":"home"
	});
</script>
</body>
</html>